<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        //         line style
        // 1. lineWidth = value
        // 线宽。只能是正值。默认是1.0。
        ctx.beginPath();
        ctx.moveTo(10, 10);
        ctx.lineTo(160, 10);
        ctx.lineWidth = 20;
        ctx.lineCap = "butt";
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(10, 50);
        ctx.lineTo(160, 50);
        ctx.lineWidth = 20;
        ctx.lineCap = "round";
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(10, 100);
        ctx.lineTo(160, 100);
        ctx.lineWidth = 20;
        ctx.lineCap = "square";
        ctx.stroke();
        //   ctx.lineCap 共有3个值：
        // butt：线段末端以方形结束
        // round：线段末端以圆形结束
        // square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
